<template>
  <div class="app-container">
    <el-row>
      <el-card>
        <el-button type="primary" icon="el-icon-plus" @click="openDialog(-1)">添加轮播信息</el-button>
      </el-card>
    </el-row>
    <el-row style="margin-top: 1rem">
      <el-card>
        <div class="grid-content bg-purple">
          <el-table :data="carouselList" style="width: 100%">
            <el-table-column label="图片">
              <template slot-scope="scope">
                <el-image :src="scope.row.src" lazy>
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="描述" />
            <el-table-column prop="inDate" label="修改日期" />
            <el-table-column prop="link" label="跳转链接">
              <template slot-scope="scope">
                <el-link type="primary" target="_blank" :href="scope.row.link">
                  {{ scope.row.link }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column prop="target" label="是否外链">
              <template slot-scope="scope">
                <p :style="{color: scope.row.target===1?'#3742fa':'#2c3e50'}">
                  {{ scope.row.target===1?'是':'否' }}
                </p>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="是否禁用">
              <template slot-scope="scope">
                <p :style="{color: scope.row.status===1?'#c0392b':'#2ed573'}">
                  {{ scope.row.status===1?'禁用':'启用' }}
                </p>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" @click="openDialog(scope.row.topicId)" />
                <el-button type="danger" icon="el-icon-delete" @click="deleteRow(scope.row.topicId)" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog
          title="轮播信息"
          top="5vh"
          :destroy-on-close="true"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :visible.sync="dialogVisible"
          width="70%"
          @close="refresh"
        >
          <add-or-update-carousel :key="dialogVisible" :topic-id="topicId" @updateDialog="updateDialog" />
        </el-dialog>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { adminListTopic, deleteTopic } from '@/api/topic'
import AddOrUpdateCarousel from '@/views/admin/setting/carousel/components/AddOrUpdateCarousel'

export default {
  components: {
    AddOrUpdateCarousel
  },
  data() {
    return {
      carouselList: [],
      dialogVisible: false,
      topicId: -1
    }
  },
  mounted() {
    this.adminListTopic()
  },
  methods: {
    adminListTopic() {
      adminListTopic().then(res => {
        this.carouselList = res.data
      })
    },
    openDialog(topicId) {
      this.dialogVisible = true
      this.topicId = topicId
    },
    updateDialog(flag) {
      this.dialogVisible = flag
    },
    deleteRow(topicId) {
      this.$confirm('此操作将永久删除轮播图数据，是否继续删除？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        deleteTopic({ topicId: topicId }).then(res => {
          if (res.data) {
            this.$message.success(res.message)
            this.adminListTopic()
          }
        })
      })
    },
    refresh() {
      this.adminListTopic()
    }
  }

}
</script>

<style scoped>

</style>
